<template>
  <div class="wechat-setting-page">
    <page-header-wrapper>
      <page-tab-list>
        <a-alert message="此配置用于adapay" type="info" show-icon style="margin: 24px 0" />
        <a-form-model :model="formData" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" ref="form">
          <a-form-model-item label="app_id" prop="app_id">
            <a-input v-model="formData.app_id" />
          </a-form-model-item>
          <a-form-model-item label="api_key_live" prop="api_key_live">
            <a-input v-model="formData.api_key_live" />
          </a-form-model-item>
          <a-form-model-item label="rsa_private_key" prop="rsa_private_key">
            <a-input v-model="formData.rsa_private_key" />
          </a-form-model-item>
          <a-row type="flex">
            <a-col :span="4"></a-col>
            <a-button :loading="confirmLoading" @click="onSave" type="primary">保存</a-button>
          </a-row>
        </a-form-model>
      </page-tab-list>
    </page-header-wrapper>
  </div>
</template>
<script>
import { conf, confSave } from '@/api/setting/adapay'
export default {
  data() {
    return {
      formData: {},
      rules: {
        app_id: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        api_key_live: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        rsa_private_key: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
      },
      confirmLoading: false,
    }
  },
  async created() {
    await this.getData()
  },
  methods: {
    onSave() {
      this.confirmLoading = true
      this.$refs.form.validate(async (confirm) => {
        if (confirm) {
          const res = await confSave({ conf: this.formData })
          this.getData()
          this.$message.success('保存成功')
          this.confirmLoading = false
        } else {
          this.confirmLoading = false
        }
      })
    },
    getData: async function () {
      const res = await conf({})
      this.formData = res.data
    },
  },
}
</script>
<style lang="less" scoped>
.wechat-setting-page {
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
}
</style>
